<template>
	<div class="fx-list-cell-select-input" @click="onCellClick">
		<div v-show="!isEdit" class="fx-ellipsis fx-cursor"><slot>{{cellTextComputed}}</slot></div>
		<w-validate ref="validate">
			<w-input
				v-show="isEdit"
				ref="w-input"
				v-model="currentInputValue"
				:maxlength="maxlength"
				:regType="regType"
				:placeholder="placeholder"
				:disabled="disabled"
				:prefix-icon="prefixIcon"
				:suffix-icon='suffixIcon'
				@keyup.enter.native="onInputEnter"
				@keyup.up.native.prevent="onInputUp"
				@keyup.down.native.prevent="onInputDown"
				@change="onInputChange"
				@blur="onBlur"
			>
				<slot></slot>
				<slot name="suffix"></slot>
			</w-input>
		</w-validate>
	</div>
</template>
<script>
import cellMixin from '../mixins/fxListCell.js'
export default {
	name: 'fx-list-cell-input',
	mixins: [cellMixin],
	props: {
		isEdit: Boolean,
		cellText: null,
		value: null,
		stop: Boolean,
		disabled: Boolean,
		maxlength: Number,
		regType: String,
		placeholder: {
			type: String,
			default: '请输入'
		},
		prefixIcon: null,
		suffixIcon: null
	},
	data () {
		return {
			currentInputValue: '',
			validateFlag: false,
			validateMessage: ''
		}
	},
	computed: {
		cellTextComputed () {
			if (!this.$fxUtils.isDef(this.cellText)) {
				return this.currentInputValue
			}
			return this.cellText
		}
	},
	created () {
		this.initValidate({
			showValidate: this.showValidate,
			clearValidate: this.clearValidate,
			setFocus: this.focus
		})
	},
	watch: {
		value: {
			immediate: true,
			handler (val) {
				this.currentInputValue = val
			}
		}
	},
	methods: {
		showValidate (message) {
			this.$refs.validate.show(message)
			this.focus()
		},
		clearValidate () {
			this.$refs.validate.clear()
		},
		focus () {
			this.$refs['w-input'].focus()
		},
		onBlur () {
			this.$refs.validate.clear()
		},
		onCellClick () {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click', this.row, this.rowIndex)
		},
		onInputEnter () {
			this.debounce(200, true).then(() => {
				if (typeof this.$listeners['on-input-enter'] === 'function') {
					this.$emit('on-input-enter', this.row, this.rowIndex)
				} else {
					this.cellEnter(event)
				}
			})
		},
		onInputChange () {
			this.$emit('input', this.currentInputValue)
			this.$emit('on-change', this.currentInputValue, this.row)
		},
		onInputUp () {
			this.debounce(50, false).then(() => {
				if (typeof this.$listeners['on-input-up'] === 'function') {
					this.$emit('on-input-up', this.row, this.rowIndex)
				} else {
					this.cellUp(event)
				}
			})
		},
		onInputDown () {
			this.debounce(50, false).then(() => {
				if (typeof this.$listeners['on-input-down'] === 'function') {
					this.$emit('on-input-down', this.row, this.rowIndex)
				} else {
					this.cellDown(event)
				}
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
</style>

